<template>
  <view class="container">
    <view class="container_item1">
      <!-- 各党支部人数统计 1 -->
      <view class="contain">
        <h3>各党支部人数统计</h3>
        <view class="contain_item1">
          <view v-for="(i, index) in dangZhiBu" :key="index" class="item">
            <p class="title">{{ i.djDeptName }}</p>
            <p>
              <span class="num">{{ i.num }}</span>
              人
            </p>
          </view>
        </view>
      </view>
      <!-- 各党支部人数统计 2 -->
    </view>
    <view class="container_item">
      <!-- 各类型党建活动统计 1 -->
      <view class="contain">
        <view class="dangjian_title" style="display: flex">
          <h3>各类型党建活动统计</h3>
          <picker
            style="height: 100%; padding-top: 30rpx"
            mode="date"
            :value="date"
            :start="startDate"
            :end="endDate"
            fields="year"
            @change="bindDateChange"
          >
            <p style="color: #999">
              {{ fullYear }}
              <uni-icons
                type="bottom"
                size="16"
                color="rgb(153, 153, 153)"
              ></uni-icons>
            </p>
          </picker>
        </view>

        <view class="charts-box" v-if="huodongArr.length">
          <qiun-data-charts
            type="pie"
            style="width: 100%; height: 100%"
            :opts="opts"
            :chartData="chartData"
          />
        </view>
        <image
          v-else
          src="../../static/dangjian/no_datas.png"
          style="width: 600rpx; height: 184rpx"
        ></image>
      </view>
      <!-- 各类型党建活动统计 2 -->
    </view>
    <view class="container_item">
      <!-- 党理考核分数统计 1 -->
      <view class="contain">
        <h3>党理考核分数统计</h3>
        <view class="fraction_select">
          <p>
            平均分：<span class="num">{{ averageScore }}</span
            >分
          </p>

          <picker
            class="data_select"
            :range="testPaperArr"
            :value="testPaperIndex"
            @change="changeStatus"
          >
            <view class="uni-input"
              >{{ testPaperArr[testPaperIndex] }}
              <uni-icons
                type="bottom"
                size="16"
                color="rgb(153, 153, 153)"
              ></uni-icons>
            </view>
          </picker>
        </view>

        <view class="charts-box" v-if="fenshu">
          <!-- type="column" -->
          <qiun-data-charts
            type="line"
            style="width: 100%; height: 100%"
            :opts="opts3"
            :chartData="chartData3"
            :ontouch="true"
          />
        </view>
        <image
          v-else
          src="../../static/dangjian/no_datas.png"
          style="width: 600rpx; height: 184rpx"
        ></image>
      </view>
      <!-- 党理考核分数统计 2 -->
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/NavBar.vue";

import {
  apiDeptCount, // 1 党建各支部人数统计
  getPaperNameList, // 2 试卷名称列表
  getPeopleNum, // 3 统计每个试卷分数下共有多少人
  apiDataCount, //4 各类型党建活动统计
  apiExamScore, // 5 获取试卷分数
} from "@/net/fenxi";

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      max: 0,
      opts: {
        color: [
          "#F9A467",
          "#7162E4",
          "#3FC6BC",
          "#F2C96B",
          "#3B95FF",
          "#9FCC58",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF",
          },
        },
      },
      opts3: {
        padding: [30, 30, 20, 6],
        touchMoveLimit: 24,
        enableScroll: true,
        legend: {
          show: false,
        },
        xAxis: {
          title: "分数",
          disableGrid: true,
          scrollShow: true,
          boundaryGap: false, // 不留空隙
          itemCount: 16, // 可视区域内显示的X轴数据点数量
          labelCount: 4, // 数据点文字（刻度点）单屏幕限制显示的数量
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          showTitle: true,
          data: [
            {
              title: "人数",
              max: this.max,
            },
          ],
          minInterval: 10,
        },
        extra: {
          column: {
            type: "group",
            width: 16,
            categoryGap: 10,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            seriesGap: 10,
          },
        },
      },
      chartData: {},
      chartData2: {},
      chartData3: {},
      cWidth: 750,
      cHeight: 250,
      fenshu: [],
      huodongArr: [],
      averageScore: 0,
      testPaperIndex: 0,
      myChart: null,
      huodongTotal: null,
      // 试卷类型
      testPaperArr: [],
      testPaperArr1: [],
      testPaperId: 0,
      time: "",
      dangZhiBu: [],
    };
  },
  onReady() {
    this.getDeptCount(); // 党建各支部人数统计
    this.getPaperNameListFn(); //试卷名称列表

    this.fullYear = new Date().getFullYear();
    this.getDataCount();
  },
  beforeDestroy() {
    this.myChart.clear();
    this.myChart.dispose();

    this.huodongTotal.clear();
    this.huodongTotal.dispose();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      }, 500);
    },

    // 选择年份
    bindDateChange(e) {
      let year = e.detail.value;
      this.fullYear = year;
      this.getDataCount(year);
    },

    // 获取各类型党建活动统计
    getDataCount(time) {
      let times = time ? time : new Date().getFullYear();
      apiDataCount(times)
        .then((res) => {
          if (res.code == 0) {
            this.huodongArr = res.data;
            let data = res.data.map((v) => {
              return {
                name: v.activityTypeName,
                value: v.num,
              };
            });
            this.$nextTick(() => {
              let res = {
                series: [
                  {
                    data,
                  },
                ],
              };
              this.chartData = res;
            });
          } else {
            this.huodongArr = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.huodongArr = [];
        });
    },

    changeStatus(e) {
      console.log(e);
      let index = e.detail.value;
      this.testPaperIndex = index;

      let id = this.testPaperArr1[index].id;

      this._getPeopleNum(id);
    },

    _getPeopleNum(id) {
      apiExamScore(id)
        .then((res) => {
          if (res.code == 0) {
            console.log(res.data);
            this.averageScore = res.data.average;
          } else {
            this.averageScore = 0;
          }
        })
        .catch((err) => {
          this.averageScore = 0;
        });
      getPeopleNum(id)
        .then((res) => {
          console.log(res);
          let data = res.data;
          if (res.code == 0) {
            if (data.length) {
              let categories = []; // 横坐标
              let yData = []; // 纵坐标
              let totalScore = data[0].score;

              for (let i = 0; i <= totalScore; i++) {
                categories.push(i);
                yData.push(0);
              }

              for (let i = 0; i < data.length; i++) {
                yData[data[i].userScore] = data[i].count;
              }

              for (let i = 0; i < yData.length; i++) {
                if (yData[i] == 0) {
                  yData[i] = "";
                }
              }
              this.fenshu = true;

              this.$forceUpdate();
              console.log(categories, yData);

              // 1 取最大值;
              // 2 如果最大值小于5,则等于5;
              // 3 如果最大值大于5,最大值除以5并向上取整然后再乘以5;
              // 4 如何max大于100,则等于100
              let max =
                Math.max(...yData) < 5
                  ? 5
                  : Math.ceil(Math.max(...yData) / 5) * 5;
              if (max > 100) {
                max = 100;
              }
              this.opts3.yAxis.data[0].max = max;

              let res = {
                categories,
                series: [
                  {
                    name: "人数",
                    data: yData,
                  },
                ],
              };

              this.$nextTick(() => {
                this.chartData3 = res;
              });
            } else {
              this.fenshu = false;
            }
          } else {
            this.fenshu = false;
          }
        })
        .catch((err) => {
          this.fenshu = false;
        });
    },
    getPaperNameListFn() {
      getPaperNameList()
        .then((res) => {
          if (res.code == 0) {
            if (res.data.length) {
              this.testPaperArr1 = res.data;
              this.testPaperArr = res.data.map((v) => {
                return v.name;
              });
              this.testPaperId = res.data[0].id;
              this._getPeopleNum(this.testPaperId);
            }
          } else {
            this.testPaperArr = this.testPaperArr1 = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.testPaperArr = this.testPaperArr1 = [];
        });
    },

    // 党建各支部人数统计
    getDeptCount() {
      apiDeptCount()
        .then((res) => {
          if (res.code == 0) {
            this.dangZhiBu = res.data;
          } else {
            this.dangZhiBu = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.dangZhiBu = [];
        });
    },

    bindTimeChange: function (e) {
      this.time = e.detail.value;
    },
  },
};
</script>

<style lang="scss">
	@import '@/static/common.scss';
.uni-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

.charts-box {
  width: 100%;
  height: 300px;
}

::v-deep .is-input-border,
::v-deep .uni-select,
::v-deep .uni-date-x--border {
  text-align: right;
  border: none !important;
  width: 50%;
  position: relative;
  left: 50%;
}

page {
  background: #f9f9f9;
  font-size: 28rpx;
  background: #f9f9f9;
}

h3 {
  padding: 0 !important;
  font-size: 32rpx;
  margin: 30rpx 0;
}

.p-100 {
  padding: 0 30rpx;
  margin: 10rpx 0;
  box-sizing: border-box;
}

.info_page_bg {
  position: absolute;
  top: 0;
}

.container {
  height: 100%;
  background-size: 100%;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  box-sizing: border-box;
  background: $jianbianBg;
}

.container_item1,
.container_item {
  background: #fff;
  padding: 0 20rpx;
  box-sizing: border-box;
  width: 700rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.contain {
  width: 100%;
  height: 100%;
}

.contain_item1 .item {
  height: 100rpx;
  background: $themeBgColor;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.contain_item1 .item .title {
  font-size: 30rpx;
  font-weight: 500;
  color: $themeColor;
}

p > .num {
  font-size: 32rpx;
  font-weight: bold;
  color: $themeColor;
}

.fraction_select {
  width: 662rpx;
  height: 100rpx;
  background: $themeBgColor;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  position: relative;
}
.data_select {
  color: #999;
}

.code {
  width: 100%;
  min-height: 360rpx;
  text-align: center;
  position: relative;
}

.cancel {
  color: #a8a8a8;
  position: absolute;
  top: 26rpx;
  right: 40rpx;
}

.register_people {
  height: 280rpx;
  overflow-y: scroll;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  flex-wrap: wrap;
}

.dangjian_title {
  align-content: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.peo_item {
  width: 20%;
  text-align: center;
  font-size: 24rpx;
  font-weight: 500;
  color: #0e1634;
}

.guanliyuan {
  background: #f9f9f9;
}

/* 管理员-未开始  1*/
.guanliyaun_one,
.guanliyuan_two {
  width: 702rpx;
  background: #ffffff;
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);
  padding: 20rpx;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  font-size: 30rpx;
  color: #ffffff;
  border-radius: 8rpx;
}

.guanliyaun_one .code_img {
  width: 662rpx;
  height: 300rpx;
  background: #e7f2ff;
  border-radius: 8rpx;
}

.guanliyaun_one .down_code {
  width: 662rpx;
  height: 80rpx;
  background: #3b95ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  box-sizing: border-box;
  position: absolute;
  bottom: 10rpx;
}

.guanliyaun_one .down_code view {
  display: flex;
  align-items: center;
}

.guanliyaun_one .code_img image {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

/* 管理员-未开始  2*/

.guanliyuan_two_peo ._top {
  width: 662rpx;
  height: 360rpx;
  background: #e7f2ff;
}

.guanliyuan_two_peo ._top .two_peo_top {
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  color: #364a71;
}

.guanliyuan_two_peo ._top .two_peo_btm {
  height: 280rpx;
  overflow: scroll;
  position: relative;
}

.guanliyuan_two_peo ._top .two_peo_btm .code_img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 管理员 - 进行中 2 */

.guanliyuan_two_btn {
  height: 150rpx;
  position: relative;
}

.guanliyuan_two_btn view {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  width: 300rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #4161f6;
  color: #fff;
  border-radius: 6rpx;
}

.title_img {
  width: 72rpx;
  height: 72rpx;
  border-radius: 8rpx;
  border: 1px solid #ccc;
}

/* 视频位置 */
.video {
  width: 100% !important;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  right: 0;
}

.icon-guanbi {
  font-size: 50rpx;
  color: #fff;
  position: absolute;
  z-index: 10;
  top: 10rpx;
  right: 46rpx;
}

.my-Video {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  width: 90%;
}

/* 上传台账 */
.upload_account {
  color: #fff;
  padding: 8rpx;
}

.item_status {
  border-radius: 8rpx;
  overflow: hidden;
  font-size: 22rpx;
  color: #fff;
  padding: 2rpx 6rpx;
}

.btn_upload_account {
  width: 662rpx;
  height: 88rpx;
  line-height: 88rpx;
  margin: 0 auto;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 8rpx;
}

/* 头部 开始 */
.item_title {
  display: flex;
}

.item_title .title_right {
  margin-left: 40rpx;
}

.item_title .theme {
  font-size: 32rpx;
  font-weight: bold;
  color: #0e1634;
  line-height: 38rpx;
}

.item_title .type {
  font-size: 24rpx;
  font-weight: 500;
  color: #000000;
  line-height: 28rpx;
  margin-right: 20rpx;
}

/* 头部 结束 */

/* 时间地点人员 1 */
.item_time {
  width: 100%;
}

.item_time .time {
  height: 84rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item_time .time image {
  margin-right: 20rpx;
}

.item_time .time text {
  color: #999999;
  font-size: 30rpx;
}

.item_time .peo_view {
  width: 662rpx;
  min-height: 100rpx;
  background: #f3f5f8;
  border-radius: 8rpx;
  border: 2rpx solid #d6dbe3;
  padding: 20rpx 28rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  color: #0e1634;
  display: flex;
}

/* 时间地点人员 2 */
/* 活动内容 1 */
.activity_content {
  width: 662rpx;
  min-height: 180rpx;
  background: #f3f5f8;
  border-radius: 8rpx;
  opacity: 1;
  border: 2rpx solid #d6dbe3;
  margin-top: 20rpx;
  padding: 40rpx 20rpx;
  box-sizing: border-box;
}

/* 活动内容 2 */

/* 附件 1 */
.appendix {
  width: 750rpx;
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 662rpx;
  min-height: 120rpx;
  background: #f3f5f8;
  border-radius: 8rpx;
  border: 1rpx solid #d6dbe3;
  color: #3c95ff;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.appendix_title {
  flex: 3.5;
  display: flex;
  align-items: center;
}

.appendix_con {
  flex: 10;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* 附件 2 */

/* 台账详情显示的图片 1 */
.images_con {
  margin: 8rpx 0;
  font-size: 30rpx;
  font-weight: 500;
  color: #666666;
}

.img_con_zanwu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.images_con text {
  display: inline-block;
  margin: 30rpx 0;
}

.images {
  width: 660rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.images .img_item image {
  border-radius: 8rpx;
  margin-right: 10rpx;
}

/* 台账详情显示的图片 2 */

/* 附件 1 */
.file_item {
  width: 750rpx;
  height: 60rpx;
  padding: 10rpx 0;
  background: #f8f3f3;
  border-radius: 8rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.file_item .appendix_title {
  flex: 3;
}

.file_item .appendix_con {
  text-align: right;
}

/* 附件 2 */
</style>
